<template> 
	<view>
		<userinfo v-if="user_options.toLogin" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo" ></userinfo>
		<villageChooseHouse v-if="choose_options.need_choose_house" :options="choose_options" @chooseHouseId="chooseHouseId"></villageChooseHouse>
		<view class="container" v-if="listData.user">
			<view class="background-info" :style="'background:' + mobile_head_color">
				<view class="info-box">
					<view class="info">
						<view class="name-text">{{ listData.user.name }}</view>
						<view class="info-num">{{ listData.user.usernum }}</view>
						<view class="address">{{ listData.user.address }}</view>
					</view>
					<view class="info-icon">
						<image :src="listData.user.avatar" class="info-img"></image>
					</view>
				</view>
			</view>
			
			<view class="mywallet" @tap="goUrl" data-url="url/My/my_money">
				<view class="mywallet-text">
					
					<view class="wallet">
						<view class="my-icon">
							<image :src="listData.my_wallet_icon" class="my-img"></image>
						</view>
						<view class="wallet-text">我的钱包</view>
					</view>
					<view class="right-icon">
						<image src="../../../static/images/right.png" class="right-img"></image>
					</view>
				</view>
				<view class="cell"></view>
				<view class="pig-grid">
					<view class="pig-grid-item">
						<view class="item-text">{{ listData.user.money }}</view>
						<text class="text">账户余额</text>
					</view>
					<view class="pig-grid-item">
						<view class="item-text">{{ listData.user.score }}</view>
						<text class="text">账户积分</text>
					</view>
					<view class="pig-grid-item">
						<view class="item-text">VIP{{ listData.user.level }}</view>
						<text class="text">账户等级</text>
					</view>
				</view>
			</view>
			<view style="height:16rpx;background-color:#f4f4f4;"></view>
			<view v-for="(item, index) in listData.list" :key="index">
				<view class="mylist">
					<view class="list-item" @tap="goUrl" :data-url="items.url"  :data-title="items.title" v-for="(items,indexs) in item" :key="indexs">
						<view class="list_box">
							<view class="my-icon">
								<image :src="items.icon" class="my-img"></image>
							</view>
							<view class="list_box_text">
								{{items.title}}
							</view>
						</view>
						<view class="right-icon">
							<image src="../../../static/images/right.png" class="right-img"></image>
						</view>
					</view>
				</view>
				<view style="height:16rpx;background-color:#f4f4f4;"></view>
			</view>
		</view>
		<tabbar class="tabbar" :tabbar="tabbar"></tabbar>
		<!-- 弹层 -->
		<view>
			<uni-popup @click="openPopup" ref="popup" type="center" class="villageHousePopup" :maskClick="false">
				<view class="popup-box">
					<view class="popup-img1">
						<image src="../../../static/images/bg1.png" class="icon-img1"></image>
					</view>
					<view class="popup-img pigcmsIdView">请选择户号</view>
					<scroll-view class="popup-list" scroll-y="true" scroll-top="0" show-scrollbar="false">
						<view class="popup-card" v-for="(item, index) in listhouseData" @tap="goVillagehouse" :data-pigcms_id="item.pigcms_id">{{ item.address }}</view>
					</scroll-view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	import uniIcon from '../components/uni-icon/uni-icon.vue';
	import uniPopup from '../components/uni-popup/uni-popup.vue';
	import villageChooseHouse from '../components/villageChooseHouse/villageChooseHouse';

	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;

	const getMyindexlist = () => {
		common.post(
			'HouseApi&a=village_my', {
				village_id: _this.village_id,
				pigcms_id: _this.pigcms_id
			},
			data => {
				if (data) {
					console.log('HouseApi&a=village_my', data);
					console.log(data);
					_this.listData = data;
					const address = data.user.address
					uni.setStorageSync('address_key', address);
				}
			}
		);
	}
	const setMyHouseInfo = () => {
		var res = {
			village_id: _this.village_id,
			village_name: _this.village_name,
			pigcms_id: _this.pigcms_id
		};
		uni.setStorageSync('village_key', res);
	}
	export default {
		data() {
			return {
				listData: {},
				user_options: {},
				listhouseData: {},
				tabbar: {},
				isIphoneX: false,
				account_height: 0,
				need_bind_house: false,
				village_id: 0,
				pigcms_id: 0,
				village_name: '',
				choose_options: {},
				config: '',
				mobile_head_color: '',
				property_id: 0
			};
		},
		onShow() {
			common.editTabbar({}, function(data) {
				_this.tabbar = data;
			});
			
			// #ifdef H5
				common.hideWxShare()
			// #endif
			
			_this.showMyPage();
		},
		onLoad: function(options) {
			_this = this;

			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color
			});
		},
		components: {
			uniIcon,
			villageChooseHouse,
			uniPopup
		},
		methods: {
			showMyPage(){
				console.log('我的', app.globalData.is_login)
				const res = uni.getStorageSync('village_key');
				if (res) {
					if(_this.pigcms_id && _this.pigcms_id != res.pigcms_id){
						console.log('换房子了', _this.pigcms_id, res.pigcms_id)
						_this.listData = {};
					}
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
					if (res.property_id && res.property_id>0) {
						_this.property_id = res.property_id;
					}
				}
				if (app.globalData.is_login) {
					 
					_this.choose_options = {};
					
					console.log('village_id----------', _this.village_id);
					console.log('pigcms_id++++++++', _this.pigcms_id);
					if (!_this.village_id) {
						console.log('village_id++++++++', _this.village_id);
						uni.showModal({
							title: common.changeTxt('提示'),
							content: common.changeTxt('您没有选择小区,请选择一个小区浏览'),
							showCancel: false,
							confirmText: common.changeTxt('选择'),
							success: function(res) {
								if (res.confirm) {
									var url = '/pages/village/my/villagelist';
									if (_this.property_id && _this.property_id > 0) {
										url += '?property_id=' + _this.property_id;
									}
									uni.redirectTo({
										url: url
									});
								}
							}
						});
					} else if (!_this.pigcms_id) {
						_this.choose_options = {
							need_choose_house: true,
							village_id: _this.village_id,
							after_event: '',
							canCancle: false,
							bindHasCancleMethod: false
						}
					} else {
						getMyindexlist()
					}
				} else {
					 
					_this.user_options = {
						toLogin: true
					};
				}
			},
			getUserInfo(e) {
				console.log('user.info', e.userInfo);
				if (e.userInfo) {
					_this.showMyPage();
				} else {
					_this.user_options = {}
					if (common.checkIsFooterPage("/pages/village/index/index")) {
						wx.switchTab({
							url: "/pages/village/index/index"
						});
					} else {
						wx.redirectTo({
							url: '/pages/village/index/index',
						})
					}
				}
			},
			goUrl: function(e) {
				console.log(e);
				
				if (e.type == 'submit') {
					common.upFormid(e);
				}

				if (e.currentTarget.dataset.goodsid) {
					goodsReport(e.currentTarget.dataset.goodsid);
				}

				var nums = e.currentTarget.dataset.nums;
				var pageTitle = e.currentTarget.dataset.url_title;
				var url = e.currentTarget.dataset.url;
				var title = e.currentTarget.dataset.title;
				if(!url){
					uni.navigateTo({
						url:'/pages/village/my/waterReportlist'
					})
				}
				if (!pageTitle) {
					pageTitle = '';
				}

				if (nums) {
					common.post(
						'Login&a=house_adver_click', {
							adver_id: nums
						},
						function(e) {
							common.parseUrl(url, '', false, pageTitle);
						}
					);
				} else {
					common.parseUrl(url, '', false, pageTitle);
				}
			},
			openPopup() {
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
			},
			chooseHouseId(e) {
				_this.pigcms_id = e.pigcms_id;
				setMyHouseInfo();
				getMyindexlist();
				_this.closePopup();
			}
		}
	};
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.container {
		padding: 0rpx 0rpx 101rpx 0rpx;
		margin: 0rpx;
		background: #ffffff;
		padding-bottom: 98rpx;
		padding-bottom: calc(98rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(98rpx + env(safe-area-inset-bottom));
		overflow-x: hidden;
	}

	.info-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: url(../../../static/images/infobg.png) no-repeat center;
		background-position: 0rpx -130rpx;
		background-size: cover;
		padding: 40rpx 40rpx 130rpx 40rpx;
	}
	.background-info {
		background: url(../../../static/images/infobg.png) no-repeat center;
		background-size: cover;
	}
	.name-text {
		font-size: 36rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		line-height: 60rpx;
	}

	.info-num {
		font-size: 26rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 60rpx;
	}

	.address {
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 60rpx;
	}

	.info-icon {
		width: 150rpx;
		height: 150rpx;
		border-radius: 150rpx;
		border: 6rpx solid #FFFFFF;
	}

	.info-img {
		width: 100%;
		height: 100%;
		border-radius: 150rpx;
	}

	.mywallet {}

	.mywallet-text {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 30rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		background: #ffffff;
		margin-top: -70rpx;
	}

	.wallet {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	.wallet-text {
		font-size: 32rpx;
		font-weight: bold;
		color: rgba(21, 21, 21, 1);
		line-height: 60rpx;
		margin-left: 15rpx;
	}
	.cell {
		width: 100%;
		height: 1rpx;
		background: rgba(0, 0, 0, 1);
		opacity: 0.05;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: rgba(21, 21, 21, 1);
		line-height: 60rpx;
	}

	.item-text {
		font-size: 42rpx;
		font-weight: 400;
		color: rgba(34, 34, 34, 1);
		line-height: 60rpx;
	}

	.text {
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(142, 142, 144, 1);
		line-height: 60rpx;
	}

	.mylist {
		background: #FFFFFF;
		overflow: hidden;
	}

	.list-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 30rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		background: #ffffff;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.list_box {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	.list_box_text {
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(21, 21, 21, 1);
		line-height: 60rpx;
		margin-left: 15rpx;
	}
	.title-text {
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 60rpx;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.right-img {
		width: 100%;
		height: 100%;
	}

	/* 弹层 */
	.popup-box {
		width: 610rpx;
		height: 720rpx;
		border-radius: 10px;
	}

	.popup-img {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 100rpx;
	}

	.popup-img1 {
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -150rpx;
	}

	.pigcmsIdView {
		font-size: 40rpx;
		font-weight: 600;
		color: #333;
	}

	.icon-img1 {
		width: 100%;
		height: 100%;
	}

	.popup-list {
		position: absolute;
		top: 185rpx;
		width: 540rpx;
		height: 560rpx;
		border-radius: 10px;
		overflow: hidden;
	}

	.popup-card {
		width: 439rpx;
		height: 77rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 77rpx;
		letter-spacing: 0rpx;
		color: #333333;
		border-radius: 5px;
		/*background: rgba(245, 245, 245, 1);*/
		margin: 10rpx auto;
	}

	.popup-btnl {
		position: absolute;
		bottom: -100rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 40rpx;
		border-radius: 58rpx;
		font-size: 26rpx;
		background-color: #ffffff;
		padding: 16rpx;
	}

	.popup-img2 {
		width: 100%;
		height: 100%;
	}

	.popup-btnr {
		position: absolute;
		bottom: 57rpx;
		right: 90rpx;
		font-size: 26rpx;
		width: 200rpx;
		height: 80rpx;
		background: rgba(6, 193, 174, 1);
		border-radius: 40rpx;
		color: #ffffff;
		line-height: 80rpx;
	}
	
	.pig-grid {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
	}
	.pig-grid-item {
		width:33%;
		text-align: center;
		padding:40rpx 0;
	}
	
	.item-icon {
		width: 45rpx;
		height: 45rpx;
		margin:0 auto 10rpx;
	}
	
	.icon-img {
		width: 100%;
		height: 100%;
	}
	
	.text {
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}
	.my-icon {
		width: 45rpx;
		height: 45rpx;
	}
	.my-img {
		display: block;
		width: 100%;
		height: 100%;
	}
	
</style>
